<template>
  <div>  
   <el-backtop></el-backtop>
    <HomeCarousel class="carouselstyle"></HomeCarousel>
    <div class="fade-in full-width">
      <HomeIssuePlate></HomeIssuePlate>
    </div>
    <div class="fade-in full-width">
      <HomeShowCloth></HomeShowCloth>
    </div>
    <div class="fade-in full-width">
      <HomeYijiBlog></HomeYijiBlog>
    </div>
    <div class="fade-in full-width">
      <Footer></Footer>
    </div>

  </div>
</template>

<script>
import HomeCarousel from "@/components/HomeCarousel.vue";
import HomeIssuePlate from "@/components/HomeIssuePlate.vue";
import HomeShowCloth from "@/components/HomeShowCloth.vue";
import HomeYijiBlog from "@/components/HomeYijiBlog.vue";
import Footer from "@/components/Footer.vue";

export default {
  name: "Home",
  components: {
    HomeCarousel,
    HomeIssuePlate,
    HomeShowCloth,
    HomeYijiBlog,
    Footer,
  },
  data () {
    return {
      fadeInElements: [],
    }
  },
  mounted () {
    // 先获取全部需要过渡效果的元素
    this.fadeInElements = Array.from(document.getElementsByClassName('fade-in'))
    // 监听鼠标滚动事件 
    document.addEventListener('scroll', this.handleScroll)
  },
  methods: {
    // 循环判断是否要触发过渡
    handleScroll (evt) {
      for (var i = 0; i < this.fadeInElements.length; i++) {
        var elem = this.fadeInElements[i]
        if (this.isElemVisible(elem)) {
          elem.style.opacity = '1'
          elem.style.transform = 'scale(1)'
          this.fadeInElements.splice(i, 1) // 只让它运行一次
        }
      }
    },
    // 判断元素距离窗口的位置
    isElemVisible (el) {
      var rect = el.getBoundingClientRect()
      var elemTop = rect.top + 200 // 200 = buffer
      var elemBottom = rect.bottom
      return elemTop < window.innerHeight && elemBottom >= 0
    }
  },
}
</script>

<style scoped>


.carouselstyle{
  margin-top: 15px;
}
.fade-in {
    margin-bottom: 50px;
    opacity: 0;
    transition:0.7s all ease-out;
    transform: scale(0.8);
    box-sizing: border-box;
    padding: 20px;
    display: inline-block;
  }
  .full-width {
    width: 100%;
  }

.el-icon-caret-top:before {
    content: "\e78f";
    position: absolute;
    left: -10px;
}
</style>
